<!--
 * @Author: your name
 * @Date: 2020-04-14 14:07:25
 * @LastEditTime: 2020-06-18 10:50:44
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue-element-admin\src\views\enterprise\troubleDetail.vue
 -->
<template>
  <div class="app-container">
    <el-form class="form-container" :rules="rules" :model="recitfyForm" ref="recitfyForm">
      <div class="createPost-main-container">
        <fieldset class="fieldInfo">
          <legend>
            <span>隐患基本信息</span>
          </legend>
          <div class="createPost-main-container baseInfo">
            <el-row>
              <el-col :span="24">
                <div class="postInfo-container">
                  <el-row>
                    <el-col :span="12">
                      <el-form-item
                        label-width="115px"
                        label="隐患名称:"
                        class="postInfo-container-item"
                      >{{this.troubleDetail.dangerName}}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item
                        label-width="115px"
                        label="所属公司:"
                        class="postInfo-container-item"
                      >{{this.troubleDetail.companyName}}</el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item
                        label-width="115px"
                        label="隐患级别:"
                        class="postInfo-container-item"
                      >{{this.troubleDetail.strDangerLevel}}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item
                        label-width="115px"
                        label="发现日期:"
                        class="postInfo-container-item"
                      >{{this.troubleDetail.discoverDate}}</el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item
                        label-width="115px"
                        label="隐患描述:"
                        class="postInfo-container-item contentLength"
                      >{{this.troubleDetail.dangerContent}}</el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item
                        label-width="115px"
                        label="隐患照片:"
                        class="postInfo-container-item"
                      >
                        <ele-gallery
                          :source="this.troubleDetail.dangerAppendixObjs"
                          :height="100"
                          :width="100"
                        ></ele-gallery>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item
                        label-width="115px"
                        label="整改类型:"
                        class="postInfo-container-item"
                      >{{this.troubleDetail.strdangerRecitfyType}}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item
                        label-width="115px"
                        label="整改期限:"
                        class="postInfo-container-item"
                      >{{this.troubleDetail.recitfyOverdate}}</el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item
                        label-width="115px"
                        label="整改要求:"
                        class="postInfo-container-item contentLength"
                      >{{this.troubleDetail.recitfyRequirement}}</el-form-item>
                    </el-col>
                  </el-row>
                </div>
              </el-col>
            </el-row>
          </div>
        </fieldset>
        <fieldset class="fieldInfo">
          <legend>
            <span>整改/复查情况表</span>
          </legend>
          <div style="overflow:auto;">
            <ul
              style="list-style-type:none;"
              v-if="this.troubleDetail.rectifyAndReview&&this.troubleDetail.rectifyAndReview.length>0"
            >
              <li v-for="(item,index) in this.troubleDetail.rectifyAndReview" :key="index">
                <div v-if="item.type==1">
                  <!-- 整改详情 -->
                  <div class="createPost-main-container listInfo">
                    <el-row>
                      <el-col :span="24">
                        <div class="postInfo-container cardBg">
                          <el-row>
                            <el-col :span="12">
                              <el-form-item
                                label-width="115px"
                                label="整改人:"
                                class="postInfo-container-item"
                              >{{item.companyDangerRectify.recitfyPerson}}</el-form-item>
                            </el-col>
                            <el-col :span="12">
                              <el-form-item
                                label-width="115px"
                                label="整改日期:"
                                class="postInfo-container-item"
                              >{{item.companyDangerRectify.recitfyDate}}</el-form-item>
                            </el-col>
                          </el-row>
                          <el-row>
                            <el-col :span="24">
                              <el-form-item
                                label-width="115px"
                                label="整改后照片:"
                                class="postInfo-container-item"
                              >
                                <ele-gallery
                                  :source="handlePics2(item.companyDangerRectify.recitfyAppendixObjs)"
                                  :height="75"
                                  :width="75"
                                ></ele-gallery>
                              </el-form-item>
                            </el-col>
                          </el-row>
                          <el-row>
                            <el-col :span="24">
                              <el-form-item
                                label-width="115px"
                                label="整改内容:"
                                class="postInfo-container-item contentLength"
                              >{{item.companyDangerRectify.recitfyContent}}</el-form-item>
                            </el-col>
                          </el-row>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </div>

                <div v-else>
                  <!-- 复查详情 -->
                  <!-- <el-form class="form-container"> -->
                  <div class="createPost-main-container listInfo">
                    <el-row>
                      <el-col :span="24">
                        <div class="postInfo-container cardBg">
                          <el-row>
                            <el-col :span="12">
                              <el-form-item
                                label-width="115px"
                                label="复查人:"
                                class="postInfo-container-item"
                              >{{item.companyDangerReview.reviewPerson}}</el-form-item>
                            </el-col>
                            <el-col :span="12">
                              <el-form-item
                                label-width="115px"
                                label="复查日期:"
                                class="postInfo-container-item"
                              >{{item.companyDangerReview.reviewDate}}</el-form-item>
                            </el-col>
                          </el-row>
                          <el-row>
                            <el-col :span="24">
                              <el-form-item
                                label-width="115px"
                                label="复查照片:"
                                class="postInfo-container-item"
                              >
                                <ele-gallery
                                  :source="handlePics2(item.companyDangerReview.reviewAppendixObjs)"
                                  :height="75"
                                  :width="75"
                                ></ele-gallery>
                              </el-form-item>
                            </el-col>
                          </el-row>
                          <el-row>
                            <el-col :span="24">
                              <el-form-item
                                label-width="115px"
                                label="整改内容:"
                                class="postInfo-container-item contentLength"
                              >{{item.companyDangerReview.reviewContent}}</el-form-item>
                            </el-col>
                          </el-row>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                  <!-- </el-form> -->
                </div>
                <el-divider></el-divider>
              </li>
            </ul>
            <p v-else style="text-align:center">尚无数据显示</p>
          </div>
        </fieldset>
        <fieldset
          class="fieldInfo"
          v-if="this.troubleDetail.dangerState==3||this.troubleDetail.dangerState==5"
        >
          <legend>
            <span>整改填报</span>
          </legend>
          <el-row>
            <el-col :span="24">
              <div class="postInfo-container">
                <el-input v-model="recitfyForm.companyDangerId" type="hidden" style="display:none"></el-input>
                <el-row>
                  <el-col :span="12">
                    <el-form-item
                      label-width="115px"
                      label="整改人"
                      class="postInfo-container-item"
                      prop="recitfyPerson"
                    >
                      <el-input placeholder="请输入整改人" v-model="recitfyForm.recitfyPerson"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      label-width="115px"
                      label="整改日期"
                      class="postInfo-container-item"
                      prop="recitfyDate"
                    >
                      <el-date-picker
                        v-model="recitfyForm.recitfyDate"
                        type="date"
                        placeholder="请输入整改日期"
                        value-format="yyyy/MM/dd"
                        class="filter-item"
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item
                      label-width="115px"
                      label="整改照片上传"
                      class="postInfo-container-item"
                    >
                      <el-upload
                        class="upload-demo"
                        action="#"
                        :before-upload="beforeAvatarUpload"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove"
                        :file-list="recitfyForm.pics"
                        list-type="picture"
                        :http-request="httpRequest"
                      >
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
                      </el-upload>
                      <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt />
                      </el-dialog>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="24">
                    <el-form-item
                      label-width="115px"
                      label="整改内容"
                      class="postInfo-container-item"
                      prop="recitfyContent"
                    >
                      <el-input
                        placeholder="请输入整改内容"
                        v-model="recitfyForm.recitfyContent"
                        type="textarea"
                        :rows="4"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item style="text-align: center;">
                      <el-button type="primary" @click="submitDraftForm">保存草稿</el-button>
                      <el-button type="primary" @click="submitRealForm">正式提交</el-button>
                      <el-button @click="closeCurrentTag">关闭</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </fieldset>
      </div>
    </el-form>
  </div>
</template>
<script>
// import { validURL, validUsername } from '@/utils/validate'
import { fetchTroubleDetail, addRecitfy } from '@/api/troubles'
import EleGallery from 'vue-ele-gallery'
import path from 'path'
import moment from 'moment'
import { getBaseDicInfo } from '@/api/baseApi'
export default {
  created() {
    const id = this.$route.params && this.$route.params.id

    this.getRectifyTypeList()
    this.getTroubleDetail(id)
    // if (this.isEdit) {
    //   //如果是编辑数据
    //   const id = this.$route.params && this.$route.params.id
    //   // this.fetchUserData(id)
    // }
    this.tempRoute = Object.assign({}, this.$route)
  },
  // props: {
  //   isEdit: {
  //     type: Boolean,
  //     default: false
  //   }
  // },
  components: {
    EleGallery
  },
  data() {
    return {
      rules: {
        recitfyPerson: [
          { required: true, message: '整改人不能为空', trigger: 'blur' }
        ],
        recitfyDate: [
          { required: true, message: '整改日期不能为空', trigger: 'blur' }
        ],
        recitfyContent: [
          { required: true, message: '整改内容不能为空', trigger: 'blur' }
        ]
      },
      troubleRectifyTypes: [], //整改类型
      troubleDetail: {},
      dialogImageUrl: '',
      dialogVisible: false,
      loading: false,
      recitfyForm: {
        id: '',
        companyDangerId: '',
        recitfyPerson: '',
        rectifyState: '', //整改状态1草稿2正式提交
        recitfyDate: '',
        recitfyContent: '',
        recitfyAppendixCrudeFileIds: [],
        recitfyAppendixUpdateFileIds: [],
        fileList: [],
        pics: []
        // dangerRecitfyType: '', //隐患整改类型
        // dangerRecitfyOverdate: moment().format('YYYY/MM/DD'), //隐患整改期限
        // messageFlag: 0 //0不启用，1启用
      }
    }
  },
  methods: {
    getRectifyTypeList() {
      getBaseDicInfo({ typeId: 1 }).then((response) => {
        this.troubleRectifyTypes = response.data
      })
    },
    closeCurrentTag() {
      // 调用全局挂载的方法
      this.$store.dispatch('tagsView/delView', this.$route)
      // 返回上一步路由
      this.$router.go(-1)
    },
    getTroubleDetail(id) {
      //如果直接正式提交
      this.recitfyForm.companyDangerId = id

      fetchTroubleDetail({
        dangerId: id,
        pType: 1
      }).then((response) => {
        this.troubleDetail = response.data
        this.troubleDetail.dangerAppendixObjs = this.troubleDetail.dangerAppendixObjs.map(
          (obj) => {
            return {
              id: obj.id,
              title: obj.name,
              src: `/api${obj.url}`
            }
          }
        )
        // console.log('this.troubleDetail', this.troubleDetail)

        if (this.troubleDetail.draft) {
          //如果有草稿
          this.recitfyForm = {
            id: this.troubleDetail.draft.companyDangerRectify.id,
            companyDangerId: this.troubleDetail.draft.companyDangerRectify
              .companyDangerId,
            recitfyPerson: this.troubleDetail.draft.companyDangerRectify
              .recitfyPerson,
            rectifyState: this.troubleDetail.draft.companyDangerRectify
              .rectifyState,
            recitfyDate: this.troubleDetail.draft.companyDangerRectify
              .recitfyDate,
            recitfyContent: this.troubleDetail.draft.companyDangerRectify
              .recitfyContent,
            recitfyAppendixCrudeFileIds: this.troubleDetail.draft
              .companyDangerRectify.recitfyAppendixCrudeFileIds,
            recitfyAppendixUpdateFileIds: this.troubleDetail.draft
              .companyDangerRectify.recitfyAppendixUpdateFileIds,
            pics: this.handlePics(
              this.troubleDetail.draft.companyDangerRectify.recitfyAppendixObjs
            ),
            fileList: []
          }
        }
      })
    },
    handlePics(pics) {
      return pics.map((p) => {
        p.url = `/api${p.url}`
        return p
      })
    },
    handlePics2(pics) {
      return pics.map((p) => {
        return {
          title: p.name,
          src: `/api${p.url}`
        }
      })
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
      //此处file表示被删除的文件
      this.recitfyForm.recitfyAppendixUpdateFileIds = fileList.map((file) => {
        if (!file.raw) {
          return file.id
        }
      })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    submitDraftForm() {
      //提交草稿
      this.$refs.recitfyForm.validate((valid) => {
        if (valid) {
          const formData = new FormData()
          formData.append('id', this.recitfyForm.id)
          formData.append('companyDangerId', this.recitfyForm.companyDangerId)
          formData.append('recitfyPerson', this.recitfyForm.recitfyPerson)
          formData.append('rectifyState', 1)
          formData.append('recitfyDate', this.recitfyForm.recitfyDate)
          formData.append('recitfyContent', this.recitfyForm.recitfyContent)
          formData.append(
            'recitfyAppendixCrudeFileIds',
            this.recitfyForm.recitfyAppendixCrudeFileIds
          )
          formData.append(
            'recitfyAppendixUpdateFileIds',
            this.recitfyForm.recitfyAppendixUpdateFileIds
          )
          this.recitfyForm.fileList.forEach((file) => {
            formData.append('files', file, file.name)
          })
          addRecitfy({ formData }).then((res) => {
            if (res.success) {
              this.$notify({
                title: '成功',
                message: '整改草稿保存成功',
                type: 'success',
                duration: 2000
              })
            } else {
              this.$notify({
                title: '失败',
                message: '整改草稿保存失败',
                type: 'error',
                duration: 2000
              })
            }
          })
        } else {
          this.$notify({
            title: '失败',
            message: '验证失败',
            type: 'error',
            duration: 2000
          })
          return false
        }
      })
    },
    submitRealForm() {
      //正式提交
      this.$refs.recitfyForm.validate((valid) => {
        console.log(valid)
        if (valid) {
          const formData = new FormData()
          console.log('this.recitfyForm', this.recitfyForm)
          formData.append('id', this.recitfyForm.id)
          formData.append('companyDangerId', this.recitfyForm.companyDangerId)
          formData.append('recitfyPerson', this.recitfyForm.recitfyPerson)
          formData.append('rectifyState', 2)
          formData.append('recitfyDate', this.recitfyForm.recitfyDate)
          formData.append('recitfyContent', this.recitfyForm.recitfyContent)
          formData.append(
            'recitfyAppendixCrudeFileIds',
            this.recitfyForm.recitfyAppendixCrudeFileIds
          )
          formData.append(
            'recitfyAppendixUpdateFileIds',
            this.recitfyForm.recitfyAppendixUpdateFileIds
          )
          this.recitfyForm.fileList.forEach((file) => {
            formData.append('files', file, file.name)
          })
          addRecitfy({ formData }).then((res) => {
            if (res.success) {
              this.$notify({
                title: '成功',
                message: '整改保存成功',
                type: 'success',
                duration: 2000
              })
            } else {
              this.$notify({
                title: '失败',
                message: '整改保存失败',
                type: 'error',
                duration: 2000
              })
            }
          })
        } else {
          this.$notify({
            title: '失败',
            message: '验证失败',
            type: 'error',
            duration: 2000
          })
          return false
        }
      })
    },
    // 上传之前的格式设置
    beforeAvatarUpload(file) {
      //图片上传前图片大小和类型判断
      const isImg = file.type === 'image/jpeg' || 'image/jpg' || 'image/png'
      // const isSize = file.size / 1024 / 1024 < 1
      if (!isImg) {
        this.$message.error('上传文件只能是图片格式！')
      }
      // if (!isSize) {
      //   this.$message.error('上传图片不能超过1MB！')
      // }
      // return isImg && isSize
      return isImg
    },
    httpRequest(data) {
      // console.log('httprequest')
      // console.log('data.file', data.file)
      this.recitfyForm.fileList.push(data.file)
      // console.log('this.postForm.fileList', this.postForm.fileList)
    }
    // fileChange(file) {
    //   // console.log('fileChange')
    //   this.imgfileList.push({
    //     name: file.name,
    //     url: file.url
    //   })
    // }
  }
}
</script>
<style lang="scss" scoped>
.baseInfo /deep/ .el-form-item {
  margin-bottom: 0;
}
.listInfo /deep/ .el-form-item {
  margin-bottom: 0;
}
.fieldInfo {
  border-color: #eee;
  border-width: 1px;
  border-style: solid;
  margin-bottom: 20px;
  legend {
    color: #666;
  }
}
.cardBg {
  background-color: #eee;
}
.contentLength {
  width: 600px;
  word-break: break-all;
}
</style>
